<div id="Terminal">
  <div class="row" style="position: absolute; right: 16px">
    <div class="col-sm-12 PanelItemF">
      <div class="PanelItem PanelItemBlack" v-on:click="RES.redirectPage('./template/component/console.html', 'server/console', MCSERVER.listenServername);">
        <span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span>
        控制台
      </div>
      <div v-if="MCSERVER.username.substr(0, 1)=='#'" class="PanelItem PanelItemBlack" v-on:click="RES.redirectPage('./template/server.html', 'server/view', '');">
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        实例列表
      </div>
      <div class="PanelItem PanelItemBlack" v-on:click="loadHistory()">
        <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
        历史
      </div>
      <div class="PanelItem PanelItemBlack PhoneDisplayNone" v-on:click="goBttom()">
        <span class="glyphicon glyphicon-download PhoneDisplayNone" aria-hidden="true"></span>
        底部
      </div>
      <div class="PanelItem PanelItemBlack" v-on:click="clearConsole()">
        <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
        清屏
      </div>
      <div class="PanelItem PanelItemBlack" v-on:click="stopServer()"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> 关闭</div>
      <div class="PanelItem PanelItemBlack PhoneDisplayNone" v-on:click="toOpenServer()">
        <span class="glyphicon glyphicon-play PhoneDisplayNone" aria-hidden="true"></span>
        开启
      </div>
    </div>
  </div>
  <div id="TerminalMinecraft" contenteditable="false">
    <br />
    <span style="color: #03ea0a">[ SYSTEM ]</span> 正在监听服务端日志输出.
    <br />
  </div>
  <div class="" style="border-top: 1px solid #585858">
    <input
      id="TerminalCommand"
      @keyup.up="toCommandhi(1)"
      @keyup.down="toCommandhi(-1)"
      @keyup.enter="toCommand"
      v-model="command"
      type="text"
      class="TerminalCommand"
      placeholder="[命令输入框] 按下 ↑ 或 ↓ 可以查看本地命令记录,输入 help 或 ? 可以查看帮助信息,回车执行命令."
      aria-describedby="sizing-addon3"
      autocomplete="off"
    />
  </div>
</div>

<script>
  MI.rListener("onload", function () {
    // 定义页面地址
    TOOLS.definePage("template/component/terminal", "server/console", MCSERVER.listenServername);

    PAGE.nowPage = 0; //当前最低页
    PAGE.serverName = MCSERVER.listenServername;
    PAGE.methods = 1;

    //容器布局改变
    $("#MainContainer").css("background-color", "rgb(60,60,60)");
    $("body").css("background-color", "rgb(60,60,60)");
    $("#ConsoleMain").css("max-width", "999999px");

    WS.sendMsg("server/console/ws", PAGE.serverName);

    PAGE.TerminalMinecraft = $("#TerminalMinecraft");
    PAGE.TerminalMinecraft.css("height", document.body.clientHeight - 45 + "px");

    PAGE.tmp_onresize = function () {
      $("#TerminalMinecraft").css("height", document.body.clientHeight - 45 + "px");
    };
    MI.listener("resize", PAGE.tmp_onresize);

    // 默认请求一段历史
    WS.sendMsg(
      "server/console/history",
      JSON.stringify({
        serverName: PAGE.serverName
      })
    );

    VIEW_MODEL.newVue("Terminal", {
      el: "#Terminal",
      methods: {
        goBttom: function () {
          var ele = document.getElementById("TerminalMinecraft");
          ele.scrollTop = ele.scrollHeight;
        },
        loadHistory: function () {
          WS.sendMsg(
            "server/console/history",
            JSON.stringify({
              serverName: PAGE.serverName
            })
          );
        },
        toOpenServer: function () {
          WS.sendMsg("server/console/open", PAGE.serverName);
        },
        toCommand: function (parCommand) {
          if (parCommand && typeof parCommand == "string") this.command = parCommand;
          var data = {
            command: this.command,
            serverName: PAGE.serverName
          };
          if (this.command.length >= 1 || typeof parCommand == "string") {
            //压入命令栈 并 发送
            this.commandList.unshift(this.command);
            WS.sendMsg("server/console/command", JSON.stringify(data));
          }
          this.command = "";
          this.commandListPrint = 0;
        },
        toCommandhi: function (fl) {
          if (this.commandListPrint > this.commandList.length - 1) this.commandListPrint = this.commandList.length - 1;
          if (this.commandListPrint < 0) this.commandListPrint = 0;
          console.log("commandListPrint", this.commandListPrint, "vlaue", this.commandList[this.commandListPrint]);
          if (fl == 1) {
            //up
            this.command = this.commandList[this.commandListPrint];
            this.commandListPrint++;
          } else {
            //down
            this.command = this.commandList[this.commandListPrint];
            this.commandListPrint--;
          }
          return false;
        },
        clearConsole: function () {
          var ele = document.getElementById("TerminalMinecraft");
          ele.innerHTML = [
            "<br /><span style='color:#03ea0a;'>",
            "[ 控制面板 ]:",
            "</span>",
            "控制面板内容已经清空，您所查看的历史记录位置依然保留。",
            "<br>",
            "<span style='color:#03ea0a;'>",
            "[ 控制面板 ]:",
            "</span>",
            "如果您在此页面遇到卡顿，内存高等现象，请使用此功能来优化。<br />"
          ].join(" ");
        },
        stopServer: function () {
          this.toCommand("__stop__");
        }
      },
      data: {
        allowedStart: true,
        command: "",
        commandList: [],
        commandListPrint: 0,
        historyIf: false
      }
    });
    PAGE.mainC = document.getElementById("TerminalMinecraft");

    $("#TerminalCommand").focus();
  });

  MI.rListener("onend", function () {
    WS.sendMsg("server/console/remove", "");
    PAGE.mainC.innerHTML = "";
    PAGE.mainC.onscroll = function () {};

    MI.onDestroy("resize", PAGE.tmp_onresize);

    //布局恢复
    $("#MainContainer").removeAttr("style");
    $("#ConsoleMain").removeAttr("style");
    $("body").removeAttr("style");
  });
</script>
